<template>
  <!--互动按钮组件 竖屏和横屏公用组件-->
  <div class="right-box">
    <div :class="[zxyhClass,rightLg?'right-lg':'',isYqyl?'right-yqyl':'',{'zxjtqh-app-ios':$channel=='zxjtqh' && getPlatform=='app' && isIos}]" v-if="isOriginHei">
      <ul :class=" isNoBtn ? 'no-ul-box':isLsPoScreen =='LscreenLive'?'lscreenLive-ul':''">
        <li v-if="isInvitaCard" id="zhibo_yaoqing" @click="clickInteraction">
          <div class="invite-btn">
            <!--邀请和邀请有礼 -->
            <img :src="isYao?inviteImg:inviteCourteousImg" alt="">
            <p>邀请</p>
          </div>
        </li>
        <!-- <transition name="actionBox" @before-enter="sheetBeforeEnter" @enter="sheetEnter" @after-enter="sheetAfterEnter"
          @before-leave="sheetBeforeLeave" @leave="sheetLeave"> -->
          <div id="btn-box">
            <template v-for="(item, index) in roomInfo.qaTab" >
              <li v-if="item.open" :id="qaTypeId[item.qaType]" :class="'status' + index"
                @click="openAnswer(item.qaInfoId, item.qaType)" :key="index">
                <i></i>
                <p>{{ qaTypetoBetext[item.qaType]}}</p>
              </li>
            </template>
          </div>
        <!-- </transition> -->

        <p v-if="isShowBtn" @click="arrowBtn" :class="isShow ? 'arrow-btn':'arrow-btn-up'">《</p>
      </ul>

      <!-- 转盘抽奖 -->
      <div class="prize-icon" v-if='islotteryIcon' @click="clickLivePrize">
        <img src="../../../assets/images/choujiang/live-prize-icon.png" />
      </div>
      <!-- 倒计时 -->
      <div
        v-if="isShowCountDown"
        class="lucky c-d "
        data-type="7"
        @click="openToolPage"
      >
        
        <img src="../../../assets/lucky/icon/choujiang-1.png"/>
        <div class="text" v-if="countStatus == 7">{{ countdown }}</div>
        <!-- <div class="text" v-if="countStatus == 10" style="color: #913B00;">
          已结束
        </div> -->
        <div class="text" v-if="countStatus == 1 || countStatus == 10">马上开始</div>
      </div>
             <!-- 一键下单按钮 -->
      <div class="shopping-box" v-if='shoppingData && shoppingData.goods && shoppingData.goods.goodsList.length'>
        <div id="zhibo_xiadan" class="shopping-btn-box" @click="clickShoppingList" 
          v-if="shoppingData.icon">
          <img :src="shoppingData.icon + '?x-oss-process=image/resize,m_fixed,h_125,w_125'" />
        </div>
        <div id="zhibo_yijianxiadan" @click="clickShoppingList" class="shopping-btn-box"  v-else>
          <div class="box">
            <div class="shop-text">
              {{ shoppingData.title || '一键下单' }}
            </div>
          </div>
          <div class="shop-bar1"></div>
          <div class="shop-bar2"></div>
        </div>
      </div>
      <!-- 右下活动组件 -->
      <ActiveRightBottom :dataArray='activityArrayData[3]' v-if="isActivity[3]" @formChildMsg='formChildData' />
    </div>
    <!-- 答题模块 -->
    <div class="answer-wrap" v-if="answerWrapShow">
      <div class="close-answer-wrap" @click="closeAnswer">
        <Iconfont iconClass="cha1" />
      </div>
      <!-- 答题中  -->
      <div class="answer-wrap-ing" v-if="answerWrapState === '0'">
        <div class="a-w-i-question">
          <cube-scroll :options="scrollOptions">
            <!-- <div class="a-w-i-head">{{ answerWrapTitle }}</div> -->
            <div class="a-w-i-head">
              <div v-if="isShowYinSi" class="yinsi" @click="seeYinsi">
                <img src="@/assets/images/zxjt/shuoming.png" alt="">
                <span>隐私政策</span>
              </div>
              <span>{{ answerWrapTitle }}</span>
            </div>
            <div class="center-ans">
              <div v-if="phoneIsRequired" class="phoneBlock">
                <div>手机号码：</div>
                <input id="dati_shoujihao" class="binding-form-mobile" type="number" maxlength="16" ref="mobileInput"
                  v-model="mobileD" placeholder="填写手机号，参与互动抽奖" />
              </div>
              <div class="question-item" v-for="(q, key) in answerIngArr" ref="answerListRef" :key="key">
                <div>
                  <span class="question-id">{{ key | addOne }}/{{ answerIngArr.length }}</span>
                  {{ q.qContent }}
                  <span
                    v-if="   q.qType === '2' && q.qOptionNum != 0 && (rightListClickType === 3 || rightListClickType === 4) ">（多选，最多选{{ q.qOptionNum }}项）</span>
                  <span v-else>{{ typeTextObj[q.qType] }}</span>
                </div>
                <ul v-if="q.qType === '1'">
                  <li v-for="(item, index) in q.answerList" :key="index">
                    <input id="dati_duoxuan_1" type="radio" :id="'choice' + index + '_' + key" :value="item.answerId"
                      v-model="formDataD[q.questionId]" :checked="item.isChecked" />
                    <label :for="'choice' + index + '_' + key">
                      <span class="qi-options">{{ item.seqCode }}</span>
                      <span class="qi-text">{{ item.qAnswer }}</span>
                      <Iconfont v-if="item.answerId === formDataD[q.questionId]" iconClass="duigou1 qi-icon" />
                    </label>
                  </li>
                </ul>
                <ul v-if="q.qType === '2'">
                  <li v-for="(item, index) in q.answerList" :key="index">
                    <span :class="{
                        isChecked: checkedArrD[key].Listids.indexOf(index) >= 0,
                        label: true
                      }" @click="
                        checkLabel(
                          index,
                          q.questionId,
                          item.answerId,
                          q.qType,
                          key,
                          q.qOptionNum
                        )
                      ">
                      <span class="qi-options">{{ item.seqCode }}</span>
                      <span class="qi-text">{{ item.qAnswer }}</span>
                      <Iconfont v-show="checkedArrD[key].Listids.indexOf(index) >= 0" iconClass="duigou1 qi-icon" />
                    </span>
                  </li>
                </ul>
                <div v-if="q.qType === '3'">
                  <input id="dati_xuan_3" class="filling-wrap" type="text" @blur="blurRu"
                    v-model="formDataD[q.questionId]" />
                </div>
              </div>
              <div class="answer-error-wrap">
                <div v-show="errorShowD" class="answer-error">
                  <Iconfont iconClass="gantanhao1" /> {{ answerErrorText }}
                </div>
              </div>
              <button id="dati_tijiao" class="answer-button" @click="submitAnswer" :disabled="submitDisable">
                提交
              </button>
            </div>
          </cube-scroll>
        </div>
      </div>

      <!-- 答案多题的时候 显示答案了-->
      <div class="result" v-if="answerWrapState === '1'">
        <cube-scroll :options="scrollOptions">
          <ul class="result-item">
            <li v-for="(item, index) in answerResultArr" :key="index">
              <div class="result-item-head">
                {{ index | addOne }}/{{ answerResultArr.length }} {{ item.qContent }}
              </div>
              <div class="result-item-text">
                <div class="result-item-text-left">正确答案：</div>
                <div class="result-item-text-right">
                  <div v-for="(itemAnswer, i) in item.rightAnswerList" :key="i">
                    <div v-if="item.qType === '3'">
                      {{ itemAnswer.qAnswer }}
                    </div>
                    <div v-else>
                      <span>{{ itemAnswer.seqCode }}</span>
                      <span>{{ itemAnswer.qAnswer }}</span>
                    </div>
                  </div>
                </div>
              </div>
            </li>
          </ul>
        </cube-scroll>
      </div>

      <!-- 答案一题的时候显示答案 -->
      <div class="result" v-if="answerWrapState === '2'">
        <cube-scroll :options="scrollOptions">
          <div class="prompt" v-for="(item, index) in answerResultArr" :key="index">
            <Iconfont :iconClass="resultTypeD ? 'duigou1' : 'cuowu'" />
            <p v-if="resultTypeD">恭喜你，答对了</p>
            <div v-else>
              <div class="prompt-error">对不起，答错了</div>
              <div class="oneAnswer">
                <p>正确答案：</p>
                <p v-for="(itemAnswer, i) in item.rightAnswerList" :key="i">
                  <template v-if="item.qType!=3">
                    {{ itemAnswer.seqCode }}
                  </template>
                  {{ itemAnswer.qAnswer }}
                </p>
              </div>
            </div>
          </div>
        </cube-scroll>
      </div>

      <!-- 投票结果-->
      <div class="result vote" v-if="answerWrapState === '4'">
        <cube-scroll :options="scrollOptions">
          <div class="result-head">投票结果</div>
          <div class="result-head">
            <div v-if="isShowYinSi" class="yinsi" @click="seeYinsi">
              <img src="@/assets/images/zxjt/shuoming.png" alt="">
              <span>隐私政策</span>
            </div>
            <span>投票结果</span>
          </div>
          <ul class="result-item">
            <li v-for="(item, index) in voteArr" :key="index">
              <div class="result-item-head">
                {{ index | addOne }}/{{ voteArr.length }}. {{ item.qContent }}
              </div>
              <div class="result-item-text">
                <div class="voteItem" v-for="(q, key) in item.rightAnswerList" :key="key">
                  <div>{{ q.qAnswer }}</div>
                  <div class="voteItem-p-wrap">
                    <div class="progress">
                      <div class="bar" :style="'width:' + q.votePercent"></div>
                    </div>
                    <div>{{ q.votePercent }}</div>
                  </div>
                </div>
              </div>
            </li>
          </ul>
        </cube-scroll>
      </div>

    </div>
    <!-- 倒计时组件 -->
    <countdown
      ref="countdown"
      id="countdown"
      v-if="isShowCountDown"
      :appId="appId"
      :activityId="activityIdDown"
      :socketType="socketType"
      :roomInfo="roomInfo.roomInfo"
      :roomId="roomId"
      :time="countdown"
    ></countdown>
  </div>
</template>

<script>
  import config from "../../../config"
  import fun from "../../../util/function";
  import {
    removeByValue
  } from "../../../util/util.js";
  import ActiveRightBottom from '@/components/activeCom/activeRightBottom';
  // 导入倒计时组件
  import countdown from "../components/countdown/index.vue";
  export default {
    props: {
      roomInfo: {},
      activityArray: Object, //活动数据
      isLsPoScreen: String, //横竖屏
      isPublic: Boolean,
      shoppingDataInfo:Object,
    },
    components: {
      ActiveRightBottom, //右下角活动
      countdown
    },
    filters: {
      addOne: function(value) {
        return value + 1;
      }
    },
    watch: {
      screenHeight(val) {},
      '$store.state.zxyhChangeRightHeight': function(v) {
        //console.log(this.$store.state.zxyhChangeRightHeight)
        if (this.$store.state.zxyhChangeRightHeight == 'zxyh') {
          this.zxyhClass = 'interaction-right-box interaction-right-box-zxyh'
        }
      },
    },
    data() {
      return {
        roomId: this.$route.params.roomid, //房间id
        zxyhClass: "interaction-right-box",
        isInvitaCard: true, //邀请有礼 邀 显示
        isYao: false,
        isYqyl: false,
        errorShowD: false, //答题错误提示
        answerWrapShow: false, //答题模块
        answerIngArr: [],
        submitDisable: false,
        formDataD: {}, //答题提交数据
        mobileD: "", // 手机号
        timeD: 60, // 发送验证码倒计时
        sendMsgDisabled: false, //倒计时按钮禁用
        codeInterval: null, //发送验证码定时器,
        checkedArrD: [], //多选
        answerWrapState: "0", //答题模块的 步骤
        answerResultArr: [], //答案多题的时候
        answerResultOne: [], //答案一题的时候
        answerWrapTitle: "", //答题弹框里面标题
        answerErrorText: "", //答题弹框里面错误提示文字
        iconNameAnswer: "cuowu", //icon
        resultTypeD: false, //答案是否正确
        rightList: [], //右侧悬浮列
        qaTypetoBetext: {
          //code转成文本显示出来

          "1": "答题",
          "2": "邀请",
          "3": "问卷",
          "4": "投票",
          "5": "红包",
          "6": "",
          "7":"材料",
          "8":"纪要",
        },
        qaTypeId: { // zyzq埋点需要
          "1": "zhibo_dati",
          "2": "zhibo_yaoqing2",
          "3": "zhibo_wenguan",
          "4": "zhibo_toupiao",
          "5": "zhibo_hongbao",
          "6": "zhibo_baoming",
          "7": "zhibo_cailiao",
          "8": "zhibo_jiyao",
        },
        retD: {
          "1": "答题",
          "3": "问卷",
          "4": "投票",
          "5": "红包",
        },
        typeTextObj: {
          //code转成文本显示出来
          "1": "（单选）",
          "2": "（多选）",
          "3": "（填空）"
        },
        rightListClickType: null, //右侧悬浮列点击的type
        phoneIsRequired: false, //手机号是否显示
        voteIsRequired: false, //投票结果是否显示
        voteArr: [], //投票结果数组
        codePickerShow: false,
        submitInfoId: "",
        stringUserAnswer: "", //客户提交前的答案 数组转字符串格式的
        screenHeight: window.innerHeight, // 这里是给到了一个默认值 （这个很重要），
        originHeight: window.innerHeight, //默认高度在watch里拿来做比较
        isOriginHei: true,
        inviteImg: require('../../../assets/images/live_icon/yaoqing.png'), //邀默认图片
        inviteCourteousImg: require('../../../assets/images/live_icon/invite_courteous.png'), //邀请有礼
        islotteryIcon: false, //抽奖按钮
        activityArrayData: [], //活动数组
        isActivity: [false, false, false, false],
        activityTitle: '', //活动标题
        isShow: true,
        isShowBtn: false, //展开收起按钮
        isNoBtn: true, //无右侧按钮
        transitionStyle: '0.3s height ease-in-out',
        oldQaTab:[],
        newQaTab:[],
        getPlatform:fun.getPlatform(),
        isShowYinSi:true,//是否展示隐私政策
        isIos,

        isShowCountDown: false, // 倒计时按钮
        countdown: "", // 倒计时
        activityIdDown: 0, // 倒计时活动id
        socketType: "", // socket消息类型
        time: 600,
        countStatus: 1
      };
    },
    computed: {
      rightLg() {
        return this.$store.state.shopBtnShow
      },
      shoppingData (){
        return this.shoppingDataInfo
      }
    },
    created() {
       if(this.$channel == 'zxjtqh'){
        if(this.getPlatform!='wx'){
            this.isShowYinSi = false //中信建投期货 只有微信展示
        }
      };
      let activityShowUrl = 'lotto/activityShow?roomId='+this.$route.params.roomid
      fun.requestAxios('get',activityShowUrl,(res)=>{
          if (res.data.code == "000000") {
              if(res.data.data.showLotto){
                 this.islotteryIcon = true;
              }
          } else {
            console.log('接口返回error url:', url)
          }
      })
      if(this.roomInfo.roomInfo.checkInSw == 1){ //报名 中奖信息
          this.qaTypetoBetext[6] =this.roomInfo.roomInfo.checkInBtn || '报名'
          this.roomInfo.qaTab.unshift({qaType: 6,open: true})
      }
      if (this.roomInfo.roomInfo.partnerType = 12) {//如果是腾讯会议创建的直播间
        //并且数据有纪要或者材料
        let haveSummary = this.roomInfo.roomInfo?.roomExt2?.tcSummaryList
        let haveMaterial = this.roomInfo.roomInfo?.roomExt2?.documentInfoList
        let arr = [
          { qaType: 7, open: haveSummary&&true },
          { qaType: 8, open: haveMaterial&&true },
        ]
        this.roomInfo.qaTab.unshift(...arr)
      }
      if (this.roomInfo.redPacketSwitch.open == 1) { //默认false 红包开关
        let hongBao = {
          qaType: 5,
          open: true
        } //展示红包
        this.roomInfo.qaTab.unshift(hongBao)
      }
      //是否展示收缩按钮
      if (this.roomInfo.qaTab.some(function(item) {
          return item.open
        })) {
        this.isShowBtn = true
      }
       this.oldQaTab = this.roomInfo.qaTab;
       let arrQaTab =[] //筛选展示右侧按钮
       for(let i =0; i<this.oldQaTab.length;i++){
         if(this.oldQaTab[i].open){
           arrQaTab.push(this.oldQaTab[i])
         }
       }
       this.newQaTab = arrQaTab.slice(-1);
      //type ==4  且 invitaCard 0 是关闭    1 是邀 2是邀请有礼
      let tables = this.roomInfo.tables;
      if (tables.length) {
        for (let ele of tables) {
          if (ele.type == '4' && ele.invitaCard) {
            this.isNoBtn = false
            this.isInvitaCard = true;
            if (ele.invitaCard == '1') { //邀
              this.isYao = true;
            } else if (ele.invitaCard == '2') { //邀请有礼
              this.isYqyl = true;
            } else if (ele.invitaCard == '3') {
              this.isYao = true;
              this.inviteImg = ele.diyImgUrl
            }
            return;
          } else {
            this.isInvitaCard = false;
          };
        }
        if (this.isYao == false && this.isYqyl == false) {
          this.isInvitaCard = false;
        }
      } else {
        this.isInvitaCard = false;
      }

    },
    mounted() {
      const that = this;
      window.onresize = () => {
        return (() => {
          that.screenHeight = window.innerHeight;
        })();
      };
      this.getRoomCurrActivity();
      // if (that.isShowBtn) { //执行展开
      //   that.sheetBeforeEnter(document.getElementById('btn-box'), 'done')
      //   that.sheetEnter(document.getElementById('btn-box'), 'done')
      // }

    },
    methods: {
      passSocketMsg(val) {
        if (val) {
          console.log(val, "socketMsg");
          if (val.type == "countdown") {
            this.getRoomCurrActivity();
          }
          this.activityIdDown = val.activityId;
          this.socketType = val.type;
        }
      },
      openToolPage(e) {
        const countdown = this.$refs.countdown;
        // 将倒计时的状态传递给子组件
        countdown.showDialog(this.countStatus);
      },
      clickShoppingList() {
      if (this.$store.state.isYk) { //游客
        let jointUrl = fun.getCurPageUrl('live', this.$route.params.roomid)
        fun.ykDisposeFun(jointUrl);
        return;
      }
      this.$emit('formChildMsg', {
        type: 'clickShoppingBtn'
      })
    },
      seeYinsi(){
        this.$parent.isPrivacy = true;
      },
      formChildData(data) { //子组件传过来的数据
        switch (data.type) {
          case 'activityChildArray': //单个活动数据
            this.$emit("formChildMsg", {
              type: "activityChildArray",
              data: data.data,
              loction: 'rightBottom'
            })
            break;
          default:
            break;
        }
      },
      // 获取倒计时抽奖相关信息
      getRoomCurrActivity() {
        let o = {
          rommId: this.roomId
        };
        this.$http
          .get("/lotto/countdown/getRoomCurrActivity?roomId=" + this.roomId)
          .then(
            //点击商品统计
            res => {
              if (res.data.code == "000000") {
                let data = res.data.data,
                  flag = false;
                if (data.showOpen == 1) {
                  flag = true;
                  if (data.activityId) {
                    // 倒计时处理
                    this.handleTime(data);
                  }
                } else {
                  flag = false;
                }
                this.isShowCountDown = flag;
                this.countStatus = data.state;
                this.activityIdDown = data.activityId;
                this.appId = data.appId;
                console.log(res, "0---", this.isShowCountDown);
              }
            },
            err => {}
          );
      },
      handleTime(data) {
        // 倒计时处理逻辑 handoutTime + countdownTimeLength - currTime
        let time = 0;
        // 年月日 转成毫秒
        let handoutTime = new Date(data.handoutTime.replace(/-/g, "/")).getTime();
        let countdownTimeLength = data.countdownTimeLength * 1000;
        let currTime = new Date(data.currTime.replace(/-/g, "/")).getTime();
        let countStatus = data.state;
        time = (handoutTime + countdownTimeLength - currTime) / 1000;
        console.log(handoutTime, countdownTimeLength, currTime, "---", time);
        if (time > 0) {
          this.time = time;
          this.countdownFun();
        } else {
          countStatus = 10;
          this.time = 0;
        }
        this.countStatus = countStatus;
      },
      // 倒计时
      countdownFun() {
        var minute = Math.floor(this.time / 60);
        var second = this.time % 60;
        minute < 10 ? (minute = "0" + minute) : "";
        second < 10 ? (second = "0" + second) : "";
        this.time = this.time - 1;
        this.countdown = minute + ":" + second;
        // 如果倒计时结束 清除计时器
        if (this.time < 0) {
          this.countdown = "00:00";
          this.countStatus = 10;
        } else {
          setTimeout(() => {
            this.countdownFun();
          }, 1000);
        }
      },
      redList() { //exoLink  1跳转新的路由	0半屏 saas是没有跳转外链
        //历史红包
        if (this.$store.state.isYk) {
          fun.toastMessage("亲，登录后才能抢红包哦～", 3000)
          return
        };
          this.getPostRedList();
      },
      getPostRedList() {
        let params = {
          'qid': Math.random(),
          'roomId': this.roomId
        }
        this.$http.post('/packet/room_packet_list', this.$qs.stringify(params)).then( //点击商品统计
          res => {
            if (res.data.code == "000000") {
              if (res.data.data) { //防止null
                if (res.data.data.length) {
                  this.$emit("formChildMsg", {
                    type: "historyRedPcaketListArray",
                    data: res.data.data
                  });
                } else {
                  fun.toastMessage('红包马上开始，不要离开哦...')
                }
              } else {
                fun.toastMessage('红包马上开始，不要离开哦...')
              }

            } else {
              console.log("历史红包接口错误")
            }
          },
          err => {
            console.log("历史红包接口错误")
          }
        )
      },
      clickLivePrize() { //抽奖
        this.$emit("formChildMsg", {
          type: "clickLivePrize",
          data: 'ruan'
        });
      },
      clickInteraction() { // type邀请卡  2
        this.$emit("formChildMsg", {
          type: "interactionList",
          data: 'ruan'
        });
      },
      clickMatter() { // 点击会议材料
        this.$emit("formChildMsg", {
          type: "meetingMaterial",
          data: 'ruan'
        });
      },
      clickSummary() { // 点击会议纪要
        this.$emit("formChildMsg", {
          type: "meetingSummary",
          data: 'ruan'
        });
      },
      //打开的弹框-答题，投票等 里面的第一步提交
      answerFormPost(infoId, type) {
        this.errorShowD = false;
        let that = this
        let userAnswerList = []; //答案的集合
        let m = this.answerIngArr.length; //题目总长度
        let formKey = Object.keys(this.formDataD);

        if (!Object.values) {
          Object.values = function(obj) {
            if (obj !== Object(obj))
              throw new TypeError("Object.values called on a non-object");
            var val = [],
              key;
            for (key in obj) {
              if (Object.prototype.hasOwnProperty.call(obj, key)) {
                val.push(obj[key]);
              }
            }
            return val;
          };
        }

        let formValue = Object.values(this.formDataD);
        let formPost = []; //单选和填空的集合
        for (let j = 0; j < formKey.length; j++) {
          let tObj = this.answerIngArr.find(
            item => item.questionId === formKey[j]
          );
          let qaType = tObj ? tObj.qType : "";
          formPost = {
            answerContent: [formValue[j]],
            qaType,
            questionId: formKey[j]
          };
          userAnswerList.push(formPost);
        }

        for (let i = 0; i < m; i++) {
          if (this.checkedArrD[i].Listids.length > 0) {
            userAnswerList.push(this.checkedArrD[i]);
          }
        }
        let postData = {
          infoId,
          mobile: this.mobileD,
          userAnswerList
        };

        if (userAnswerList.length > 0 && this.rightListClickType === 1) { //仅仅在答题的时候 存下用户的作答
          this.stringUserAnswer = userAnswerList[0].answerContent
            .sort()
            .toString();
        } else {
          this.stringUserAnswer = ''
        }

        if (this.phoneIsRequired && !this.mobileD) {
          this.errorShowD = true;
          this.answerErrorText = "请填写手机号";
          return false;
        }
        if (userAnswerList.length < m) {
          this.errorShowD = true;
          this.answerErrorText = "请完成题目后再提交";
          return false;
        }

        this.submitDisable = true; //防止重复提交
        //提交答案请求
        this.$http
          .post("/h5live/qa/addQaUserAnswer", postData, {
            headers: {
              "Content-Type": "application/json"
            }
          })
          .then(res => {
            if (res.data.code == "000000") {
              that.getQaAnswer(res.data.data.rightAnswer)
              this.submitDisable = false;
              // 神策打点（（答题 | 问卷 | 投票 | 报名）成功）
              const { title, anchor, roomId, roomStatus } = this.roomInfo.roomInfo;
              $sensorsTrack('liveBroadcast_liveRoomDetailsPageFunctionClick', {
                page_name: `直播${['预告', '详情'][roomStatus]}页`,
                user_nickname: this.$store.state.userInfo.nickname,
                live_room_id: roomId,
                live_room_name: title,
                live_room_status: ['预告', '直播中'][roomStatus],
                live_room_creator: anchor,
                function_name: ['', '答题', '', '问卷', '投票', '', '报名'][type],
              });
            } else {
              this.answerWrapShow = false;
              fun.toastMessage(res.data.msg, 1500);
              this.submitDisable = false;
            }
          })
          .catch(response => {
            this.submitDisable = false;
            console.log(response);
          });
      },
      submitAnswer() {
        this.answerFormPost(this.submitInfoId, this.rightListClickType);
      },
      //关闭弹框-答题，投票等
      closeAnswer() {
        this.answerWrapShow = false;
      },
      openAnswerFun(id, type) {
        if (this.$channel === config.MSYH && window.terminal.weixin && window.isUc != '1') { //  isUc 已经判断民生 微信    通行证
          fun.msySkipSinePage('live', this.$route.params.roomid, this.roomInfo.source) //调用微信 民生银行通行证
          return
        }
        if (id === 0) { //id为0 建好题目没有推送
          fun.toastMessage('未开始', 1500);
          return;
        }
        if(type === 5){ //红包
          this.redList();
          return
        }
        if(type === 6){ //报名中奖
          this.baoMing();
          return
        }
        if (type === 7) { //会议材料
          this.clickMatter();
          return
        }
        if(type === 8){ //会议纪要
          this.clickSummary();
          return
        }
        this.rightListClickType = type;
        this.errorShowD = false;
        this.submitInfoId = id;
        this.getQaInfoDetail(id, type); //获取题目包含所有的接口
      },
      //打开弹框-答题，投票等
      openAnswer(id, type) {
				// 神策打点（答题 1 问卷 3 投票 4 报名 6）
				const { title, anchor, roomId, roomStatus } = this.roomInfo.roomInfo;
				$sensorsTrack('liveBroadcast_liveRoomDetailsPageFunctionClick', {
					page_name: `直播${['预告', '详情'][roomStatus]}页`,
					user_nickname: this.$store.state.userInfo.nickname,
					live_room_id: roomId,
					live_room_name: title,
					live_room_status: ['预告', '直播中'][roomStatus],
					live_room_creator: anchor,
					function_name: ['', '答题', '', '问卷', '投票', '', '报名'][type],
				});
        if (this.$store.state.isYk) {
          let jointUrl = fun.getCurPageUrl('live', this.$route.params.roomid);
          fun.ykDisposeFun(jointUrl)
          return
        }
        if (window.terminal.isZxyhApp) { //zxyh 未登录 调起登录
          window.bank.userInfoPlugin.isLogin((res) => {
            //console.log('zxyh res.isLogin',res.isLogin)
            if (res.isLogin) { //  true 已经登录
              this.openAnswerFun(id, type);
            } else { //  false  未登录
              fun.zxyhLogin(window.location.href) //调起登录
            }
          })
        } else {
          this.openAnswerFun(id, type);
        }

      },
      //获取题目
      getQaInfoDetail(id, type) {
        //处理app 未登录游客
        if (this.$store.state.userInfo.un == "Pnr3NFDGxlk") {
          //中行游客
          fun.toastMessage("请登录中国银行APP", 1500);
          return;
        }

        let zbAct = this.roomInfo.roomInfo ? this.roomInfo.roomInfo.anchor : "";
        this.$http
          .get("/h5live/qa/getQaInfoDetail", {
            params: {
              infoId: id,
              qaType: type,
              zbAct
            }
          })
          .then(res => {
            if (res.data.code == "000000") { //拿到了题目
              const {
                wMobile = 0, showResult = 0, questions = []
              } = res.data.data;
              this.answerIngArr = questions; //题目的数组
              for (let key in this.answerIngArr) {
                this.$set(this.checkedArrD, key, {});
                this.$set(this.checkedArrD[key], "answerContent", []);
                this.$set(this.checkedArrD[key], "qaType", "");
                this.$set(this.checkedArrD[key], "questionId", "");
                this.$set(this.checkedArrD[key], "Listids", []);
              }
              this.answerWrapTitle = this.retD[type];
              this.phoneIsRequired = (wMobile === 1 ? true : false);
              this.voteIsRequired = (showResult === 1 ? true : false);
              this.answerWrapState = "0";
              this.answerWrapShow = true;
            } else if (res.data.code == '100022') { //已经互动 那结果
              this.voteIsRequired = (res.data.data.showResult === 1 ? true : false);
              let rightAnswerData = res.data.data.rightAnswer
              if (this.rightListClickType === 1) { //答题
                if (rightAnswerData.length === 1 && this.stringUserAnswer) { //只有在一题的时候并且有缓存作答数据的情况下
                  this.getQaAnswer(rightAnswerData)
                  this.answerWrapShow = true;
                } else {
                  fun.toastMessage(res.data.msg, 1500);
                }

              } else if (res.data.data.showResult && this.rightListClickType === 4) { //投票 并且后台配置了显示答案的时候 显示答案
                this.getQaAnswer(rightAnswerData)
                this.answerWrapShow = true;
              } else { //其它情况下弹msg
                fun.toastMessage(res.data.msg, 1500);
              }

            } else {
              console.log("失败");
              fun.toastMessage(res.data.msg, 1500);
            }
          })
          .catch(response => {
            console.log(response);
          });
      },
      //获取答案
      getQaAnswer(data) {
        if (this.rightListClickType === 4) {
          if (this.voteIsRequired) {
            //要显示投票结果
            this.answerWrapTitle = "投票结果";
            this.answerWrapState = "4";
            this.voteArr = data;
          } else {
            //不要显示投票结果
            this.answerWrapShow = false;
            // fun.toastMessage("提交成功", 1500);
          }
        } else if (this.rightListClickType === 3) {
          this.answerWrapShow = false;
          // fun.toastMessage("提交成功", 1500);
        } else if (this.rightListClickType === 1) {
          this.answerWrapTitle = "答案";
          this.answerResultArr = data;
          if (data.length === 1) {
            this.answerWrapState = "2"; //一题的时候
            let hhhDD = data[0].rightAnswerList;
            let mmmDD = hhhDD.map(function(item) {
              if (data[0].qType === '3') {
                return item.qAnswer
              } else {
                return item.answerId;
              }
            });
            if (this.stringUserAnswer === mmmDD.sort().toString()) {
              this.resultTypeD = true;
            } else {
              this.resultTypeD = false;
            }
          } else {
            this.answerWrapState = "1"; //多题的时候
          }
        }
      },
      //多选题的点击
      checkLabel(id, questionId, code, type, index, qOptionNum) {
        // 手机号失去焦点
        if (this.phoneIsRequired) {
          this.$refs.mobileInput.blur();
        }
        let ids = this.checkedArrD[index].Listids.indexOf(id);
        this.checkedArrD[index].qaType = type;
        this.checkedArrD[index].questionId = questionId;
        if (ids >= 0) {
          this.checkedArrD[index].Listids.splice(ids, 1);
          removeByValue(this.checkedArrD[index].answerContent, code);
        } else {
          if (qOptionNum > 0) {
            //有限制最多
            if (this.checkedArrD[index].Listids.length < qOptionNum) {
              this.checkedArrD[index].Listids.push(id);
              this.checkedArrD[index].answerContent.push(code);
            }
          } else {
            //没有限制最多
            this.checkedArrD[index].Listids.push(id);
            this.checkedArrD[index].answerContent.push(code);
          }
        }
      },
      //推送投票答题问卷等等
      pushVote(obj) {
        //开始清空操作
        if (this.$store.state.isYk) {
          return
        }
        this.answerWrapState = "0"; //答题步骤
        this.formDataD = {}; //清空
        this.phoneIsRequired = false; //手机号是否显示
        this.voteIsRequired = false; //投票结果是否显示
        this.openAnswer(obj.infoId, obj.type);
        this.roomInfo.qaTab.map(item => {
          if (item.qaType === obj.type) {
            item.qaInfoId = obj.infoId
          }
        })
      },
      // 报名信息登记
      pushBaoMing(){
        if(this.roomInfo.roomInfo.checkInSw != 1){ //此时无按钮 需加上按钮
          this.qaTypetoBetext[6] =this.roomInfo.roomInfo.checkInBtn || '报名'
          this.roomInfo.qaTab.unshift({qaType: 6,open: true})
        }
      },
      //input 失去焦点  解决ios 最新版本6.7.4 input BUG
      blurRu() {
        setTimeout(function() {
          window.scrollTo(0, 0);
        }, 100);
        this.errorShowD = false;
      },
      //点击或者焦点
      footerInput() {
        this.$refs.footerInputRu.focus();
      },
      clickFocus() {
        // this.$refs.mobileInput.focus()
        let that = this.$refs.mobileInput;
        setTimeout(function() {
          that.scrollIntoViewIfNeeded();
        }, 500);
      },
      // 关闭弹出框
      closePop() {
        this.answerWrapShow = false
      },
      //右侧按钮展开收起
      arrowBtn() {
        this.isShow = !this.isShow
        if(this.isInvitaCard){ //有邀请按钮
            this.roomInfo.qaTab = this.isShow ? this.oldQaTab :[]
          }else{
            this.roomInfo.qaTab = this.isShow ? this.oldQaTab :this.newQaTab
          }
      },
      //报名中奖信息登记
      baoMing(){
        this.$emit('formChildMsg', {
              type: 'applyInfo',
              data: {
                'Msg': '报名中奖信息填写'
              }
            })

      },

      // sheetBeforeEnter(el, done) {
      //   el.style.transition = this.transitionStyle;
      //   if (!el.dataset) el.dataset = {};
      //   el.style.height = 0;
      // },
      // sheetEnter(el, done) {
      //   if (el.scrollHeight !== 0) {
      //     el.style.height = `${el.scrollHeight}px`;
      //   } else {
      //     el.style.height = '';
      //   }
      //   el.style.overflow = 'hidden';
      //   el.style.display = "flex";
      //   el.style.flexDirection = 'column-reverse';
      // },
      // sheetAfterEnter(el, done) {
      //   el.style.transition = '';
      //   el.style.height = '';
      // },
      // sheetBeforeLeave(el, done) {
      //   if (!el.dataset) el.dataset = {};
      //   el.style.height = 0;
      //   el.style.overflow = 'hidden';
      // },
      // sheetLeave(el, done) {
      //   el.style.transition = this.transitionStyle;
      //   if (!el.dataset) el.dataset = {};
      //   el.style.height = 0;
      // },
    },
    watch: {
      activityArray() {
        //console.log(this.activityArray)
        for (let i = 0; i < this.activityArray.length; i++) {
          if (this.activityArray[i].length != 0) {
            this.$set(this.isActivity, i, true); //数组，需要修改数组的第几个索引，要改的数据
          }
        }
        this.activityArrayData = this.activityArray
      },
      //弹窗框是否打开
      answerWrapShow(val, oldVal) {
        if (val) {
          this.$emit('formChildMsg', {
            type: 'showMask',
            data: ''
          })
        } else {
          this.$emit('formChildMsg', {
            type: 'closeAll',
            data: ''
          })
        }
      },
      isInvitaCard(val, oldVal) {
        if (val == false) { //不展示邀/邀请卡
          let num = 0
          for (let i = 0; i < this.roomInfo.qaTab.length; i++) {
            if (this.roomInfo.qaTab[i].open) {
                num++
                this.isNoBtn = false  // 此时展示右侧按钮
               if (num > 1) {
                 this.isShowBtn = true //展开收起按钮
                return
              } else {
                this.isShowBtn = false
              }
            }
          }
        }
      }
    }
  };
</script>

<style scoped="scoped" lang="less">
.lucky {
  position: relative;
  img {
    width: 140px;
    height: 140px;
  }
  .text {
    position: absolute;
    bottom: 12px;
    width: 100%;
    text-align: center;
    font-size: 18px;
    font-weight: 600;
    color: #ffffff;
    line-height: 37px;
  }
}
.right-box{
  position: relative;
}
  .prize-icon img {
    width: 116px;
    height: 98px;
  }

  .prize-icon {
    width: 116px !important;
    height: 98px !important;
    margin-bottom: 8px;
    background: transparent !important;
  }

  .bgWhite {
    width: 125px !important;
    height: 125px !important;
    background: transparent !important;
  }

  .invited .box {
    width: 125px;
    height: 125px;
    background: url("../../../assets/images/yqyl.png") no-repeat;
    background-size: 100%;
    position: absolute;
    top: 0;
    left: 50%;
    margin-left: -62.5px;
  }

  .yq-text {
    width: 96px;
    height: 30px;
    background: linear-gradient(-90deg, #fea934, #ff5973);
    border-radius: 8px;
    font-size: 18px;
    color: #fff;
    text-align: center;
    line-height: 30px;
    font-weight: 500;
    margin: 55% auto 0;
  }

  @keyframes heartbeat {
    0% {
      transform: scale(1, 1);
    }

    25% {
      transform: scale(1.2, 1.2);
    }

    100% {
      transform: scale(1, 1);
    }
  }

  .invited .pic {
    width: 40px;
    position: absolute;
    right: 170px;
    top: 10px;
    animation: heartbeat 1s infinite;
    -webkit-animation: heartbeat 0.8s infinite;
  }

  .interaction-right-box {
    position: absolute;
    bottom: 110px;
    right: 10px;
    z-index: 1005;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .zxjtqh-app-ios{
   bottom: 190px;
  }

  .right-lg {
    bottom: 244px;
  }

  .right-yqyl {
    right: 4px;
  }

  .interaction-right-box-zxyh {
    position: absolute;
    bottom: 394px;
    right: 36px;
    z-index: 10;
  }

  .interaction-right-box ul {
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    width: 100px;
    margin-bottom: 20px;
    padding-bottom: 19px;
    padding-top: 11px;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 51px;
    opacity: 0.85;
    border: 1px solid #D5D5D5;
  }

  .interaction-right-box ul.lscreenLive-ul {
    background: rgba(255, 255, 255, 0.85);
    border-radius: 51px;
    border: 1px solid #D5D5D5;
  }

  .interaction-right-box ul.lscreenLive-ul li p {
    color: rgba(51, 51, 51, 1);

  }

  .interaction-right-box ul.no-ul-box {
    display: none;
  }

  .interaction-right-box ul li {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .interaction-right-box ul li i {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    margin-top: 8px;
    margin-bottom: 6px;
    line-height: 70px;
    text-align: center;
    font-size: 42px;
    font-weight: 500;
    color: #ffffff;
    position: relative;
  }

  .interaction-right-box ul li p {
    font-size: 24px;
    font-weight: 400;
    color: #FFFFFF;

  }

  .interaction-right-box ul li:nth-child(1) {
    position: relative;
  }

  /* .invite-btn {
		position: absolute;
		left: -4px;
		height: 70px;
		width: 80px;
	} */
  /*.interaction-right-box ul li:nth-child(1) .invite-btn img{
		height: 100%;
		width: 100%;
	}*/
  .invite-btn {
    margin-top: 8px;
    margin-bottom: 0px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

  }

  .invite-btn img {
    width: 70px;
    height: 70px;
  }

  .interaction-right-box ul #zhibo_dati i {
    background: url('../../../assets/images/live_icon/dati.png') no-repeat;
    background-size: 100% 100%;
  }

  .interaction-right-box ul #zhibo_wenguan i {
    background: url('../../../assets/images/live_icon/wenjuan.png') no-repeat;
    background-size: 100% 100%;
  }

  .interaction-right-box ul #zhibo_toupiao i {
    background: url('../../../assets/images/live_icon/toupiao.png') no-repeat;
    background-size: 100% 100%;
  }

  .interaction-right-box ul #zhibo_hongbao i {
    background: url('../../../assets/images/live_icon/hongbao.gif') no-repeat;
    background-size: 100% 100%;
  }
  .interaction-right-box ul #zhibo_baoming i {
    background: url('../../../assets/images/live_icon/baoming.png') no-repeat;
    background-size: 100% 100%;
  }
  .interaction-right-box ul #zhibo_cailiao i {
    background: url('../../../assets/images/live_icon/matter.png') no-repeat;
    background-size: 100% 100%;
  }
  .interaction-right-box ul #zhibo_jiyao i {
    background: url('../../../assets/images/live_icon/summary.png') no-repeat;
    background-size: 100% 100%;
  }

  /* 答题 */

  .answer-wrap {
    width: 100vw;
    max-height: 50vh;
    background: #fff;
    position: fixed;
    bottom: 0;
    border-radius: 20px 20px 0px 0px;
    z-index: 1100;
    box-shadow: 0px 8px 22px #818080;
  }

  .a-w-i-head {
    font-size: 30px;
    font-family: PingFang-SC-Medium;
    font-weight: 500;
    color: #333;
    text-align: center;
    padding: 26px 0;
  }
  .a-w-i-head> span{
    margin-left: -50px;
  }

  .yinsi{
    float: left;
    font-size: 24px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #C9161D;
    line-height: 33px;
    display: flex;
    vertical-align: middle;
  }
  .yinsi img{
    width: 24px;
    height: 24px;
    margin-right: 5px;
    margin-top: 5px;
  }
  .a-w-i-question {
    padding: 0 30px;
    /* height: calc(100vh - 540px); */
    height: 50vh;
    transform: rotate(0deg);
    overflow: hidden;
    overflow-y: auto;
  }

  .center-ans {
    font-size: 34px;
    margin-bottom: 50px;
  }

  .a-w-i-question .question-id {
    color: #cc2d30;
  }

  .question-item {
    padding-bottom: 4px;
    font-size: 30px;
  }

  .question-item>div {
    line-height: 1.2;
  }

  .a-w-i-question .question-item+.question-item {
    margin-top: 60px;
  }

  .question-item ul {
    padding-left: 45px;
    padding-top: 20px;
  }

  .question-item ul li label,
  .question-item ul li .label {
    background: #f4f4f4;
    width: 600px;
    padding: 20px 40px 20px 30px;
    border-radius: 30px;
    color: #222;
    display: flex;
    word-break: break-all;
    border: 1PX solid #f4f4f4;
    align-items: center;
  }

  .qi-options {
    width: 30px;
    height: 30px;
    line-height: 32px;
    background: #bcbcbc;
    border-radius: 50%;
    color: #fff;
    font-size: 22px;
    text-align: center;
    display: inline-block;
  }

  .qi-text {
    flex: 1;
    padding: 0 40px;
    display: inline-block;
    font-size: 30px;
  }

  .question-item .qi-icon {
    color: #fe4b52;
    font-size: 28px;
  }

  input[type="radio"] {
    width: 0px;
    height: 0px;
    opacity: 0;
  }

  .question-item ul li {
    margin-top: 30px;
    font-size: 0;
    position: relative;
  }

  .normal-color {
    color: #cc2d30;
  }

  .color {
    color: #d4d4d4;
  }

  .question-item input:checked+label {
    background: #ffeaea;
    border: 1PX solid #ff7479;
    color: #fe4b52;
  }

  .question-item input:checked+label .qi-options {
    background: #fe4b52;
  }

  .question-item li span.isChecked {
    background: #ffeaea;
    border: 1PX solid #ff7479;
    color: #fe4b52;
  }

  .question-item li span.isChecked .qi-options {
    background: #fe4b52;
  }

  .filling-wrap {
    width: 600px;
    height: 88px;
    background: #f1f1f1;
    border-radius: 10px;
    outline: none;
    margin-top: 30px;
    box-sizing: border-box;
    padding: 0 45px;
    margin-left: 45px;
    border: 1px solid #d9d9d9;
  }

  .a-w-i-button {
    width: 250px;
    height: 88px;
    background: rgba(204, 45, 48, 1);
    border-radius: 30px;
    text-align: center;
    line-height: 88px;
    color: #fff;
    position: absolute;
    bottom: 35px;
    left: 50%;
    transform: translateX(-50%);
  }

  .close-answer-wrap {
    position: absolute;
    top: 0px;
    right: 0px;
    color: #333;
    width: 100px;
    height: 100px;
    z-index: 101;
  }

  .close-answer-wrap i {
    margin-left: 30px;
    margin-top: 30px;
    display: inline-block;
    font-size: 30px;
  }

  .a-w-i-error {
    width: 600px;
    height: 48px;
    line-height: 48px;
    background: rgba(204, 160, 161, 0.24);
    border-radius: 15px;
    color: #cc2d30;
    position: absolute;
    bottom: 145px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 32px;
  }

  .a-w-i-error i {
    font-size: 28px;
    padding: 0 10px 0 30px;
  }

  .result {
    padding: 0 34px;
    overflow: hidden;
    /* height: calc(100vh - 500px); */
    height: 50vh;
    transform: rotate(0deg);
  }

  .result-head {
    padding: 25px 0;
    color: #fe4b52;
    text-align: center;
  }
  .result-head > span{
    margin-left: -50px;
  }

  .result-item {
    color: #0c0c0c;
    margin-top: 30px;
  }

  .result-item li+li {
    margin-top: 50px;
  }

  .result-item-text {
    margin-top: 30px;
    padding-left: 68px;
  }

  .result-item-text-left {
    color: #0c0c0c;
  }

  .result-item-text-right {
    color: #cc2d30;
    margin-left: 10px;
  }

  .prompt {
    margin-top: 92px;
    text-align: center;
  }

  .prompt .icon-duigou1,
  .prompt .icon-cuowu {
    font-size: 140px;
    display: inline-block;
    color: #cc2d30;
    margin-bottom: 40px;
  }

  .prompt i {
    font-size: 140px;
    width: 140px;
    display: block;
    color: #cc2d30;
    margin: 0 auto;
    margin-bottom: 40px;
  }

  .prompt p {
    color: #cc2d30;
    font-size: 32px;
    text-align: center;
  }

  .prompt-error {
    color: #0c0c0c;
    margin-bottom: 30px;
  }

  .oneAnswer {
    text-align: center;
  }

  .oneAnswer p {
    margin-top: 20px;
  }

  /*
.binding-form {
  position: relative;
} */
  /* .binding-form button {
  width: 180px;
  height: 45px;
  font-size: 26px;
  line-height: 1px;
}

.binding-form input {
  width: 100%;
  height: 65px;
  line-height: 65px;
  border: 0;
  border-bottom: 1px solid rgb(210, 210, 210);
  background: #fafafa;
}

.binding-form input.binding-form-mobile {
  padding-left: 125px;
}

.binding-form input + input {
  margin-top: 40px;
  padding-right: 220px;
} */
  /* 投票进度条 */

  .voteItem {
    margin-top: 30px;
  }

  .voteItem-p-wrap>div {
    display: inline-block;
    vertical-align: middle;
  }

  .progress {
    width: 412px;
    overflow: hidden;
    height: 36px;
    margin-bottom: 20px;
    margin-top: 20px;
    background-color: #f7f7f7;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 10px;
    margin-right: 46px;
  }

  .progress .bar {
    width: 0%;
    height: 100%;
    color: #ffffff;
    float: left;
    font-size: 12px;
    text-align: center;
    align-items: center;
    display: flex;
    justify-content: center;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
    background-color: #FE4B52;
  }

  .dialogSuspension-text {
    text-align: center;
    padding-top: 80px;
    color: #0c0c0c;
    font-size: 28px;
  }

  .internationalCode {
    color: #cc2d30;
    position: absolute;
    height: 65px;
    line-height: 65px;
    width: 100px;
  }

  .fillInPhoneBox ul {
    width: 90%;
    height: auto;
    margin: 0 auto;
    font-size: 32px;
    color: #0c0c0c;
  }

  .fillInPhoneBox ul li {
    width: 100%;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #c5c5c5;
    font-size: 30px;
  }

  .fillInPhone-arrow {
    width: 30px;
    height: 30px;
    border: 4px solid #dcdcdc;
    display: inline-block;
    transform: rotate(45deg);
    border-bottom: none;
    border-left: none;
    vertical-align: middle;
    margin-right: 10px;
  }

  .select-state {
    line-height: 70px;
  }

  .input-phone {
    width: 440px;
    margin-left: 20px;
    outline: none;
    border: none;
    background: #fafafa;
  }

  .inputCode {
    width: 200px;
    margin-top: 6px;
    background: #fafafa;
    outline: none;
    border: none;
  }

  .select-state-yz {
    margin-top: 2px;
  }

  input::-webkit-input-placeholder {
    color: #b2b2b2;
    font-size: 30px;
    text-align: left;
  }

  .tip {
    width: 750px;
    text-align: center;
    color: #cc3538;
    margin-top: 50px;
  }

  .lingquBox {
    font-size: 20px;
    color: #ababab;
    margin: 5px 0 10px 20px;
  }

  .result-item-text>div {
    display: inline-block;
    vertical-align: top;
  }

  .result-item-text-right>div+div {
    margin-top: 10px;
  }

  .redOpcity {
    opacity: 0;
  }

  .countryCode {
    justify-content: space-between;
  }

  .phoneBlock {
    display: flex;
    align-items: center;
    margin-bottom: 60px;
  }

  .phoneBlock>div {
    font-size: 30px;
  }

  .phoneBlock>input {
    width: 455px;
    padding: 12px;
    box-sizing: border-box;
    padding-left: 35px;
    font-size: 26px;
    border-radius: 10px;
    background: #f4f4f4;
    color: #bdbdbd;
  }

  .answer-button {
    width: 600px;
    height: 70px;
    background: #fe4b52;
    border-radius: 15px;
    text-align: center;
    line-height: 70px;
    color: #fff;
    margin: 0 auto;
    margin-bottom: 30px;
    font-size: 36px;
    border: 0;
    display: block;
  }

  .answer-error-wrap {
    height: 48px;
    width: 100%;
    margin-top: 30px;
    margin-bottom: 36px;
  }

  .answer-error {
    width: 600px;
    height: 48px;
    line-height: 48px;
    background: rgba(204, 160, 161, 0.24);
    border-radius: 15px;
    color: #cc2d30;
    font-size: 32px;
    margin: 0 auto;
  }

  .answer-error i {
    font-size: 28px;
    padding: 0 10px 0 30px;
  }

  .arrow-btn {
    padding-right: 26px;
    margin-bottom: 6px;
    color: rgba(153, 153, 153, 0.55);
    text-align: center;
    vertical-align: center;
    transform: rotate(270deg);
  }

  .arrow-btn-up {
    margin-bottom: 6px;
    color: rgba(153, 153, 153, 0.55);
    text-align: center;
    vertical-align: center;
    transform: rotate(90deg);
  }
  .shopping-box {
  width: 125px;
  height: 125px;
  position: relative;

  .shopping-btn-box-zxyh {
    // position: absolute;
    // right: 6px;
    // bottom: 320px;
    // z-index: 100;
  }

  .shopping-btn-box {
    // position: absolute;
    // right: 6px;
    // bottom: 120px;
    // z-index: 100;
    margin-top: 10px;
    display: flex;
    justify-content: center;
    align-items: center;

    img {
      width: 125px;
      height: 125px;
    }

    .shop-bar1 {
      width: 30px;
      height: 30px;
      position: absolute;
      top: 20px;
      left: 0;
      background: url('../../../assets/images/yq2.png') no-repeat;
      background-size: 100%;
      animation-name: baring;
      animation-duration: 1s;
      animation-iteration-count: infinite;
      animation-timing-function: ease-in-out;
      animation-delay: 0s;
      animation-play-state: running;
    }

    .shop-bar2 {
      width: 30px;
      height: 30px;
      position: absolute;
      top: -2px;
      left: 60px;
      background: url('../../../assets/images/yq1.png') no-repeat;
      background-size: 100%;
      animation-name: baring;
      animation-duration: 1s;
      animation-iteration-count: infinite;
      animation-timing-function: ease-in-out;
      animation-delay: 500ms;
      animation-play-state: running;
    }

    @keyframes baring {
      0% {
        transform: translate(0px, 0px);
      }

      50% {
        transform: translate(0px, 10px);
      }

      100% {
        transform: translate(0px, 0px);
      }
    }

    .box {
      width: 125px;
      height: 125px;
      background: url("../../../assets/images/yjxd.png") no-repeat;
      background-size: 125px 125px;

      .shop-text {
        width: 96px;
        height: 30px;
        background: linear-gradient(11deg, #FE9E3D, #FF965D);
        font-size: 18px;
        border-radius: 5px;
        color: #fff;
        text-align: center;
        line-height: 30px;
        font-weight: 500;
        position: absolute;
        top: 55%;
        left: 50%;
        margin-left: -48px;
      }
    }
  }
}
</style>
